import { Button, Col, Row, Space, Statistic } from "antd";
import styles from "./index.module.less";
import { DASHBOARD_COLUMNS1, DASHBOARD_COLUMNS2 } from "./constant";
import { map } from "lodash";
import ListComponent from "../TransactionManagement";
import { useRequest } from "ahooks";
import { getStatistics } from "@/api/modules/dashboard";
import Loading from "@/components/Loading";
import useUrl from "@/hooks/useUrl";
import diamond_top from "@/assets/images/diamond_top.png";
import diamond_bottom from "@/assets/images/diamond_bottom.png";

export default () => {
	const { data, loading } = useRequest(getStatistics);
	const { navigate } = useUrl();

	const detailData = data?.data ?? {};

	return (
		<Loading isHeight100 loading={loading}>
			<div className={styles.container}>
				<div className={styles.dashboard1}>
					<div className={styles.diamond_top}>
						<img src={diamond_top} />
					</div>
					<div className={styles.diamond_bottom}>
						<img src={diamond_bottom} />
					</div>
					<Row>
						{map(DASHBOARD_COLUMNS1, (item, index) => (
							<Col span={6} className={styles.col} key={index}>
								<Space direction="vertical" size={5}>
									<Statistic
										className={styles.num}
										prefix={item.value === "todayTradeTotalAmoun" ? "￥" : ""}
										value={detailData[item.value] ?? 0}
									/>
									<div className={styles.min_title}>{item.title}</div>
								</Space>
							</Col>
						))}
					</Row>
					<div className={styles.msg}>数据更新时间：{detailData?.lastTime}</div>
				</div>
				<div className={styles.title}>
					<span>数据看板</span>
					<span className={styles.sub_title}>数据更新时间：{detailData?.lastTime}</span>
				</div>
				<Row gutter={20} className={styles.dashboard2}>
					{map(DASHBOARD_COLUMNS2, (item, index) => (
						<Col span={6} key={index}>
							<Space
								direction="vertical"
								size={5}
								className={styles.col}
								onClick={() => {
									if (item.route) navigate(item.route);
								}}
								style={{ cursor: "pointer" }}
							>
								<Statistic className={styles.num} value={detailData[item.value] ?? 0} />
								<div className={styles.min_title}>{item.title}</div>
							</Space>
						</Col>
					))}
				</Row>
				<div className={styles.title}>
					<span>快速审批</span>
				</div>
				<ListComponent isDashboard={true} />
			</div>
		</Loading>
	);
};
